<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有人智造-SMT看板</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
</head>
<style>
    .table {
        border-collapse: collapse;
        width: 100%;
    }

    .table td, .table th {
        border: 1px solid white;
        padding: 8px;
    }

    .table th:nth-child(odd){
        background-color: #caf2ff;
    }
    .table tr:nth-child(even){
        background-color: #7bd4ce;
    }
    .main2{
        width: 45%;
        float: left;
    }
    .table th {
        background-color: #f2f2f2;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .span1{
        display: inline-block;
        width: 350px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #c8dafe;
        border-radius: 20px;
        font-size: 20px;
    }
    .container {
        max-width: 1600px;
        width: 100%;
        /*width: 1510px;*/
        /*margin: 0 auto;*/
        display: inline-block;
        padding: 0;
        /*background-color: red;*/
        height: 50%; /* 设置容器的高度 */
        overflow: auto; /* 启用垂直滚动 */
        /*margin-left: 70px;*/
        overflow-y: hidden;
        overflow-x: hidden;
        position: relative; /* 相对定位以容纳滚动内容 */
        /*display: flex;*/
        /*float: left;*/

    }
    .container1{
        width: 100%;
        /*width: 1800px;*/
        /*background-color: #666aff;*/
        position: absolute; /* 绝对定位 */
        top: 0; /* 初始位置为顶部 */
        /*animation: move 5s linear infinite; !* 使用动画滚动 *!*/
        animation-name: move;
        /*animation-duration: 800s;*/
        animation-timing-function: linear;
        /*animation-delay: 1s;*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }
    /* 滚动动画 */
    @keyframes move {
        /*0% {*/
        /*    top: 0; !* 开始时回到顶部 *!*/
        /*}*/
        /*100% {*/
        /*    top: -100%; !* 结束时滚动到底部 *!*/
        /*}*/
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-10%);
        }
    }
   .body{
       width: 100%;
       height: 1200px;
       /*background-color: #f5f7fa;*/
       font-size: 20px;
       background: linear-gradient(to bottom right, blue, pink);
       background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
       background-size: cover;
   }
   h3{
       border-radius: 20px 20px 0 0;
       padding-left: 20px;
   }
   h1{
       width: 30%;
       margin: 0 auto;
       color: white;
       background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
       linear-gradient(45deg, transparent 34px, #134194 0) left;
       background-size: 50% 100%;
       background-repeat: no-repeat;
       margin-bottom: 20px;
   }
   .return{
       position: fixed;
       top: 10px;
       left:10px;
       width: 50px;
       height: 50px;
   }
</style>
<body class="body">
    <div class="main" >
        <img src="/static/img/return.png" alt="返回总控台" class="return">
        <h1 style="text-align: center ">SMT看板</h1>
        <div style="background-color: white;border-radius:25px 25px 0 0;margin-bottom: 50px">
        <h3 style="background-color: #134094;color:#f1faff;height: 50px;line-height: 50px;" >线体当前在制信息</h3>
        <table class="table table1" style="text-align: center;">
            <tr>
                <th>线体</th>
                <th>在制制令单号</th>
                <th>产品编码</th>
                <th>产品规格</th>
                <th>计划生产数量</th>
                <th>当前投入数量</th>
                <th>当前产出数量</th>
                <th>平均每小时产量</th>
                <th>当前SPI不良率</th>
                <th>当前AOI良率</th>
                <th>制令单上线时间</th>
                <th>预计完工时间</th>
            </tr>
            <tbody id="table1">
            {volist name="$data" id="item" }

            <tr>
                <td>{$item['AREA_SN']}</td>
                <td>{$item['MO_DOC']}</td>
                <td>{$item['MODEL_CODE']}</td>
                <td>{$item['ITEM_SPEC']}</td>
                <td>{$item['PLAN_QTY']}</td>
                <td>{$item['INPUT_QTY']}</td>
                <td>{$item['OUTPUT_QTY']}</td>
                <td>{$item['AvgNum']}</td>
                <td>{$item['SPI']}</td>
                <td>{$item['AOI']}</td>
                <td>{$item['ONLINE_TIME']}</td>
                <td>{$item['PLAN_END_TIME']}</td>
            </tr>
            {/volist}
            <tbody>

        </table>
        </div>
        <div>
            <div>


            </div>
            <div class="main2 " style="margin-right:50px;background-color: white;border-radius: 25px 25px 0 0;">
                <h3 style="background-color: #134094;color:#f1faff;display: inline-block;width: 100%; height: 50px;line-height: 50px;position: sticky;top: 0;z-index: 2;margin-bottom: -1px" >待生产制令单</h3>
<!--            <table class="table table2" style="text-align: center">-->
                <table class="table" style="text-align: center;">
                <thead>
                <tr>
                    <th width="50px">序号</th>
                    <th width="240px">制令单号</th>
                    <th width="230px">产品品名</th>
                    <th width="270px">预计上线时间</th>
                </tr>
                </thead>
                </table>
                <div class="{if $data2['count']>=12}container{/if}">
                    <div class="{if $data2['count']>=12}container1{/if}" style="animation-duration:{$data2['count']}s;">
                        <table class="table"    style="text-align: center">
                            <tbody id="tableBody">
                            {foreach $data2['data'] as $k=>$v}
                            <tr>
                                <td width="50px">{$k+1}</td>
                                <td width="240px">{$v['MO_DOC']}</td>
                                <td width="230px">{$v['ITEM_NAME']}</td>
                                <td width="270px">{$v['PLAN_START_TIME']}</td>
                            </tr>
                            {/foreach}
                            </tbody>
                        </table>
                    </div>
                </div>
        </div>

        <div class="main2  " style="width: 51%;border-radius: 25px 25px 0 0;background-color: white">
            <h3 style="background-color: #134094;color:#f1faff;display: inline-block;width: 100%;height: 50px; line-height: 50px;">线体昨日制令单生产情况</h3>
            <div style="display: flex;justify-content:space-between;margin-bottom: 10px">
            <span class="span1 a">生产制令单总数:{$count}</span>
            <span class="span1 b">总产出数量:{$sum}</span>
            <span class="span1 c">昨日整体不良率:{$buHao}%</span>
            </div>
            <table class="table" style="text-align: center" >
                <tr>
                    <th>制令单号</th>
                    <th>产品型号</th>
                    <th>计划数量</th>
                    <th>产出数量</th>
                    <th>达成率</th>
                    <th>不良率</th>
                    <th>是否完结</th>
                </tr>
                <tbody id="table3">
                {volist name="$data3" id="val"}
                <tr>
                    <td>{$val['MO_DOC']}</td>
                    <td>{$val['ITEM_SPEC']}</td>
                    <td>{$val['PLAN_QTY']}</td>
                    <td>{$val['OUTPUT_QTY']}</td>
                    <td>{$val['Reached']}%</td>
                    <td>{$val['NG']}%</td>
                    {if $val['Is_finish']==1}
                    <td>开立</td>
                    {elseif $val['Is_finish']==2}
                    <td>投产</td>
                    {elseif $val['Is_finish']==3}
                    <td>关结</td>
                    {elseif $val['Is_finish']==4}
                    <td>暂停</td>
                    {elseif $val['Is_finish']==5}
                    <td>强制关结</td>
                    {/elseif}
                    {/if}
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
        </div>
    </div>

</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(".return").click(function (){
        window.history.back();
    })
    //定时刷新
    // 定义定时器，每隔一定时间执行刷新操作
    // var refreshInterval = setInterval(function() {
    //     // location.reload(); // 刷新页面
    //     $.ajax({
    //         url:'kb',
    //         type:'get',
    //         dataType:'json',
    //         success:function (res){
    //           //异步刷新看板数据
    //           //在制信息
    //           var table1=document.getElementById('table1')
    //             table1.innerHTML=''
    //             var html1=''
    //             $.each(res.data,function (i,v){
    //                 html1+='<tr><td>'+v.AREA_SN+'</td><td>'+v.MO_DOC+'</td><td>'+v.MODEL_CODE+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.INPUT_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.AvgNum+'</td><td>'+v.SPI+'</td><td>'+v.AOI+'</td><td>'+v.ONLINE_TIME+'</td><td>'+v.PLAN_END_TIME+'</td></tr>'
    //             })
    //             table1.innerHTML=html1
    //           //待生产
    //             var table2=document.getElementById('tableBody')
    //             table2.innerHTML=''
    //             var html2=''
    //             $.each(res.data2,function (i,v){
    //                 i+=1
    //                 html2+='<tr><td width="50px">'+i+'</td><td width="240">'+v.MO_DOC+'</td><td width="230">'+v.ITEM_NAME+'</td><td width="270">'+v.PLAN_START_TIME+'</td></tr>'
    //             })
    //             table2.innerHTML=html2
    //           //昨日制令单情况
    //             $('.a').text('生产制令单总数:'+res.count)
    //             $('.b').text('总产出数量:'+res.sum)
    //             $('.c').text('昨日整体不良率:'+res.buHao+'%')
    //             var table3=document.getElementById('table3')
    //             table3.innerHTML=''
    //             var html3=''
    //             $.each(res.data3,function (i,v){
    //                 if(v.Is_finish==1){
    //                     html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>开立</td></tr>'
    //                 }else if(v.Is_finish==2){
    //                     html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>投产</td></tr>'
    //                 }else if(v.Is_finish==3){
    //                     html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>关结</td></tr>'
    //                 }else if(v.Is_finish==4){
    //                     html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>暂停</td></tr>'
    //                 }else if(v.Is_finish==5){
    //                     html3+='<tr><td>'+v.MO_DOC+'</td><td>'+v.ITEM_NAME+'</td><td>'+v.PLAN_QTY+'</td><td>'+v.OUTPUT_QTY+'</td><td>'+v.Reached+'%</td><td>'+v.NG+'%</td><td>强制关结</td></tr>'
    //                 }
    //             })
    //             table3.innerHTML=html3
    //         },
    //         error:function (){
    //             console.log('网络故障')
    //             location.reload()
    //         }
    //     })
    // }, 20000); // 5000 毫秒（5 秒）间隔
</script>
</html>